Recreating HQBC's Website in Editor X | Wix Fix

Hello, fellow designers! In today’s guide, we at Live Learning Editor X will show you how to recreate a slick and professional website using the fantastic Editor X platform. If you haven't already, make sure to join our monthly NoCode Design Challenges with exciting prizes and be a part of our vibrant community of creatives, educators, and supporters!

We provide mentoring on how to build and scale your design business, ensuring that you continue to further your career and improve your skills. At Live Learning Editor X, we strive to help you thrive!

The website we'll be redesigning today is none other than HQBC's site. One of the most significant aspects of this website is its simplicity combined with cool hover interactions. We'll show you how to leverage the power of Editor X to replicate the website and add some creative flair to make it even better!

So, without further ado, let's dive into our redesign:

Create a Large Header with a Video Background

Kick-off the redesign process by first creating a large header section in Editor X. Next, use the media panel to drag out a video element and stretch it to fit the full size of your header section.

Customize the video behavior so that it starts automatically, doesn't pause when it ends, and has the audio turned off to ensure a seamless user experience. Enable loop as well so the video continuously plays.

Add a Container with a Semi-Transparent Background

To further enhance the header's appearance, create a container stretched across the entire section. Set the container's background color to black and reduce its opacity to around 70. This adjustment will give the header a stylish and subtle overlay effect.

Customize Header Positioning and Scroll Effect

Select the header and change its position type to "pinned" under the "Position" setting, making sure it overlaps the next section. With the header still selected, remove the background color in the design panel to maintain a sleek appearance.

Next, go to the scroll effect panel and enable the effect for your header by setting it to "Show on Scroll." This customization ensures a smooth and visually engaging transition as users scroll through your website.

Design Attention-Grabbing Hover Interactions

One of the most captivating aspects of HQBC's website is the dynamic hover interactions, which make it stand out from the pack. To mimic this feature, use Editor X's built-in hover interactions and modify them to suit your design preferences.

For example, you can create a stylish hover effect by changing the element's background color, adding unique animations, or even incorporating subtle delays or transitions.

Create Additional Sections and Repeat the Process

After implementing the header and hover interactions, continue designing the rest of your website by adding various sections incorporating elements such as images, text, and buttons. Make sure to repeat the process covering container overlays and hover effects to ensure a cohesive look throughout your site.

Final Thoughts

And, just like that, you've successfully recreated HQBC's website using Editor X! Congratulations on mastering the art of redesigning a professional website packed with cool hover interactions that are sure to impress any visitor.

Remember, here at Live Learning Editor X, we're always here to support you in your design journey. Don't forget to participate in our monthly NoCode Design Challenges with amazing prizes and be a part of our empowering community, providing mentorship and guidance on building your design business and advancing your career.

Now it's your turn to get creative and start designing! Happy creating, and we look forward to seeing your impressive work.